* {
    list-style: none;
}
// Z-index
$pageHeaderStickyIndex: 1800;
$dialogModalIndex: 1801;
$dialogModalMainIndex: 1802;

// 2024/1/11 版
// $routerViewBackground: rgba(247, 247, 255, 1);
// 2024/1/11 版
$routerViewBackground: rgb(216 216 231);

// 遮罩背景颜色
$modalBackground: #a3a2a291;
// 遮罩内边距
$modalPadding: 50px;
$dialogMainBoxShadow: 0px 0px 2px 0px #f1eded;
$dialogMainBorderRadius: 4px;
$dialogMainBackground: white;
$overall-fll: red;
// 顶部导航栏高度
$headerHeight: 60px;
// 边框灰色
$border-color: rgb(229, 230, 235);

// 灰色
$colorGray: #928e8e;
// 浅灰色
$colorGrayLight: #bfbaba;
// 深灰色
$colorGrayDark: #747070;

// shadow阴影样式
$overall-shadow-1: 0px 0px 12px rgba(0, 0, 0, 0.12);

// hover颜色
$overall-hover-color-1: #f5f7fa;

/**
    滚动条样式样式
**/
// ::-webkit-scrollbar{
//     display: none;
// }
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    
}

// 隐藏滚动条
.overall-scroll-bar-hidden {
    display: none;
}
// 显示滚动条（正常显示）
.overall-scroll-bar-show::-webkit-scrollbar {
    width: 6px;
}
// 显示滚动条（Hover态显示）hover mouseleave 鼠标移出样式
.overall-scroll-bar-hover-show::-webkit-scrollbar {
    width: 6px;
    display: none;
}
// 显示滚动条（Hover态显示）hover mouseover 鼠标移入样式
.overall-scroll-bar-hover-show:hover::-webkit-scrollbar {
    display: block;
}
// 滚动条样式主题 - 湛蓝色滚动条样式
.overall-scroll-bar-theme-blue::-webkit-scrollbar {
    background: #71717f61;
}
.overall-scroll-bar-theme-blue::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #2663eda6;
}
// 滚动条样式主题 - 黄色滚动条样式
.overall-scroll-bar-theme-yellow::-webkit-scrollbar {
    background: #71717f61;
}
.overall-scroll-bar-theme-yellow::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #ec3e12a6;
}
// 滚动条样式主题 - 红色滚动条样式
.overall-scroll-bar-theme-red::-webkit-scrollbar {
    background: #71717f61;
}
.overall-scroll-bar-theme-red::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #f00404a6;
}

// 滚动条样式主题 - 粉色滚动条样式
.overall-scroll-bar-theme-pink::-webkit-scrollbar {
    background: #71717f61;
}
.overall-scroll-bar-theme-pink::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #e90564a6;
}

// 滚动条样式主题 - 绿色滚动条样式
.overall-scroll-bar-theme-green::-webkit-scrollbar {
    background: #71717f61;
}
.overall-scroll-bar-theme-green::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #03e963da;
}

// 滚动条样式主题 - 黑色滚动条样式
.overall-scroll-bar-theme-black::-webkit-scrollbar {
    background: #71717f61;
}
.overall-scroll-bar-theme-black::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #01091de8;
}

// 滚动条样式主题 - 橘红滚动条样式
.overall-scroll-bar-theme-tangerine::-webkit-scrollbar {
    background: #71717f61;
}
.overall-scroll-bar-theme-tangerine::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #ee3000f1;
}

// 滚动条样式主题 - 紫色滚动条样式
.overall-scroll-bar-theme-purple::-webkit-scrollbar {
    background: #71717f61;
}
.overall-scroll-bar-theme-purple::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #ec04b2a6;
}

// 滚动条样式主题 - 灰色滚动条样式
.overall-scroll-bar-theme-grey::-webkit-scrollbar {
    background: #71717f61;
}
.overall-scroll-bar-theme-grey::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #8b8d92a6;
}

// 滚动条样式主题 - 青色滚动条样式
.overall-scroll-bar-theme-ching::-webkit-scrollbar {
    background: #71717f61;
}
.overall-scroll-bar-theme-ching::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #04e6c7d5;
}
// 滚动条样式主题 - 炫丽（现代）滚动条样式
.overall-scroll-bar-theme-dazzle::-webkit-scrollbar {
    background: #f8340361;
}
.overall-scroll-bar-theme-dazzle::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #014972a6;
}

/**
    滚动条样式结束 ===============================================================
**/

.overall-layout-overspread {
    width: 100vw;
    height: 100vh;
}

.overall-relative {
    position: relative;
}

.overall-absolute {
    position: absolute;
}

.overall-flex {
    display: flex;
}

.overall-align-center {
    align-items: center;
}

.overall-margin-auto {
    margin: 0 auto;
}

.overall-weight-bold {
    font-weight: bold;
}

.overall-width-100 {
    width: 100%;
}

.overall-height-100 {
    height: 100%;
}

.overall-w-h-100 {
    width: 100%;
    height: 100%;
}

.overall-flex-1 {
    flex: 1;
}

.overall-box-border {
    box-sizing: border-box;
}

.overall-flex-center-center {
    justify-content: center;
    align-items: center;
}

.overall-flex-nowrap {
    flex-wrap: nowrap;
}
.overall-flex-wrap {
    flex-wrap: wrap;
}

.overall-flex-row {
    flex-direction: row;
}

.overall-flex-column {
    flex-direction: column;
}

.overall-justify-end {
    justify-content: flex-end;
}

.overall-justify-center {
    justify-content: center;
}

.overall-justify-between {
    justify-content: space-between;
}

.overall-inline-block {
    display: inline-block;
}

.overall-overflow-hide {
    overflow: hidden;
}

.overall-overflow-auto {
    overflow: auto;
}

.overall-overflow-y-auto {
    overflow-y: auto;
}
.overall-overflow-overlay {
    overflow: overlay;
}

.overall-overflow-x-auto {
    overflow-x: auto;
}

.overall-text-center {
    text-align: center;
}

.overall-text-left {
    text-align: left;
}

.overall-flex-row-lasttrim-2.overall-flex-row-lasttrim-2:nth-child(n + 2),
.overall-flex-row-lasttrim-3.overall-flex-row-lasttrim-3:nth-child(n + 3),
.overall-flex-row-lasttrim-4.overall-flex-row-lasttrim-4:nth-child(n + 4),
.overall-flex-row-lasttrim-5.overall-flex-row-lasttrim-5:nth-child(5n),
.overall-flex-row-lasttrim-6.overall-flex-row-lasttrim-6:nth-child(6n) {
    margin-right: 0px;
}

.overall-border-radius-50 {
    border-radius: 50%;
}
.overall-margin-20-px {
    margin: 20px;
}

.overall-drow-box {
    padding: 0px 20px;
}

// 字体颜色  灰色
.overall-text-color-gray-light {
    color: $colorGrayLight;
}
.overall-text-color-gray {
    color: $colorGray;
}
.overall-text-color-gray-dark {
    color: $colorGrayDark;
}
.overall-flex-wrap {
    flex-wrap: wrap;
}
.overall-font-size-1rem {
    font-size: 1rem;
}
.overall-font-size-08rem {
    font-size: 0.8rem;
}

.overall-table-options {
    justify-content: space-around;
}

.overall-table-surround {
    background: white;
    padding: 14px 20px;

    &-options {
        margin-bottom: 12px;
        margin-top: 8px;
        display: flex;
        justify-content: space-between;

        &-left {
        }
        &-right {
        }
    }
}
.overall-table-pagination {
    margin-top: 10px;
    padding: 0px 20px;
    padding-bottom: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-left {
        width: 140px;
    }
    &-right {
    }
}

.overall-table-screen-options {
    padding: 18px 18px;
    padding-bottom: 20px;
    background: white;
    border-bottom: 1px dashed #c3c3c3;
    border-width: 2px;
    // margin-bottom: 15px;
    display: flex;

    &-left {
        flex: 1;
        &-ul {
            display: flex;
            gap: 15px;
            box-sizing: border-box;
            margin-bottom: 15px;
            &:last-child {
                margin-bottom: 0px;
            }
            &-li {
                $width: 32%;
                min-width: $width;
                max-width: $width;
                display: flex;
                &-key,
                &-value {
                    height: 100%;
                }
                &-key {
                    width: 80px;
                    display: flex;
                    align-items: center;
                    text-indent: 10px;
                    font-size: 0.8rem;
                }
                &-value {
                    flex: 1;
                    display: flex;
                }
            }
        }
    }

    &-right {
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        gap: 15px;

        &-row {
            flex-direction: row;
        }
    }
    &-right:empty {
        margin-left: 0px;
        width: 0px;
    }
}

@keyframes dialog-main {
    0% {
        transform: translateY(-50px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes modal-one {
    0% {
        opacity: 0;
        // transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
